<template>
  <div class="bet_row" >
    <div class="title">{{title}}</div>
    <div class="group">
      <div class="wrap" v-for="(item, index) in betRows" :key="index">
        <div class="button_1" style="font-size: 16px;">
          <div v-if="item.label" class="name">{{item.label}}</div>
          <div v-if="item.ballNum" class="name" :style="ballStyle[item.ballNum - 1]">{{item.ballNum}}</div>
          <div class="odds">{{item.odds}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import baseData from '../../config/BaseData';
    export default {
        name: "BetRowBall",
        props: {
            title: '',
            rowNum: '',
            betRows: {
                type: Array,
                default: []
            }
        },
        data(){
            return {
              ballStyle: baseData.ballStyle
            }
        },
        created() {
            //this.rowWidth = (1/this.rowNum * 100) + '%';
        }
    }
</script>

<style lang="less" scoped>
  .bet_row .title{
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    justify-content: space-between;
    color: #856c9c;
    padding: 10px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f2f2f2;
  }

  .bet_row .group{
    display: flex;
    flex: 1 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    .wrap{
      width: 33.33%;
      padding: 10px;

      .button_1{
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid transparent;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        padding: 0 12px;
        height: 50px;
        -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
        border-radius: 8px;
        font-size: 16px;
        white-space: nowrap;

        .name{
          color: #3f3f3f;
          -ms-flex-pack: center;
          justify-content: center;
          border-radius: 100px;

          display: flex;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }

        .odds{
          color: #ff6c2c;
        }
      }
    }
  }
</style>
